import { memo, useEffect, useMemo, useState } from "react";
import { useDispatch } from "react-redux";
import { startChange } from "../store/photo/photoSlice";
export interface FooterProps {
  photototal?: number,
  keyword?: string,
  category?: number
}
const YiFooter: React.FC<FooterProps> = ({ photototal, keyword, category }) => {
  const [index, setIndex] = useState(1);
  const [inputVal, setInputVal] = useState("");
  const data = [index, index + 1, index + 2, index + 3, index + 4, index + 5]
  const getTotal = useMemo(() => {
    let totalpho = 0;
    if (photototal !== undefined && photototal !== 0) {
      totalpho = photototal
    }
    return `当前共 ${totalpho} 张 / ${totalpho && Math.floor((totalpho) / 24)} 页`
  }, [photototal])

  const pre = () => {
    if (index > 1) {
      setIndex(index - 1)
    }
  }
  const next = () => {
    if (index < (photototal ? Math.floor((photototal) / 24) : 1)) {
      setIndex(index + 1)
    }
  }
  const handleChange = (value: string) => {
    setInputVal(value);
    if (0 < parseInt(value) && parseInt(value) < (photototal ? Math.floor((photototal) / 24) : 1)) {
      setIndex(parseInt(value))
    }
  }
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch<any>(startChange({ start: (index - 1) * 24, keyword, category }))
  }, [index])
  return (
    <footer className="flex box-border p-2 justify-center items-center mb-2">
      <div onClick={pre} className="cursor-pointer shadow-sm p-2 hover:shadow-xl hover:scale-105 shadow-black rounded-md">上一页</div>
      <ul className="flex justify-center items-center ">
        {
          data.map((item) => {
            return (<li onClick={() => { setIndex(item) }} key={item} className=" first-of-type:bg-sky-400 cursor-pointer ml-2 shadow-sm py-2 shadow-black px-4 rounded-md hover:shadow-xl hover:scale-105 hover:shadow-black">{item}</li>)
          })
        }
      </ul>
      <div onClick={next} className="cursor-pointer shadow-sm p-2 hover:shadow-xl hover:scale-105 shadow-black rounded-md ml-2">下一页</div>
      <div className="ml-2 text-gray-400 ">
        {getTotal}
        跳转
        <input value={inputVal} onChange={(e) => { handleChange(e.target.value) }} type="text" className="w-12 outline-none border-b-2 border-gray-400 focus:border-gray-700" />页
      </div>
    </footer >
  )
}

export default memo(YiFooter);